<template>
	<view>
		<view class="indexhed">
			<view class="text-center">
				<text class="text-666 text-xxl font-shadow" @click="turnkkk">序列号:</text>
			</view>
		</view>
		<view class="padding-lr-lg padding-tb-xxl">
			<u-collapse @change="change" @close="close" @open="open">
				<u-collapse-item title="文档指南" name="Docs guide">
					<uni-card title="基础卡片" extra="">
						<uni-group mode="card">
							<view class="flex justify-between">
								<text>分组</text>
								<text class="text-999">内容</text>
							</view>
							<view class="flex justify-between">
								<text>分组</text>
								<text class="text-999">内容</text>
							</view>
							<view class="flex justify-between">
								<text>分组</text>
								<text class="text-999">内容</text>
							</view>
						</uni-group>
					</uni-card>
				</u-collapse-item>
				<u-collapse-item title="组件全面" name="Variety components">
					<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
				</u-collapse-item>
				<u-collapse-item title="众多利器" name="Numerous tools">
					<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script>
	// import { getProcessList } from '/common/appApi.js'
	export default {
		data() {
			return {
				listName: '',
				listQuery: {
					page: 1,
					limit: 20,
					state: false,
					productSn: '',
					productId: '',
					lineNumber: '',
					processNumber: '',
					startTime: '',
					endTime: '',
					sort: '+test_time'
				},
				processList: []
			}
		},
		onLoad: function(options) {
			this.listName = options.name
			// this.getList()
		},
		methods: {
			// 获取清单
			getList() {
				let params = {
					para: this.listQuery,
					eventId: 1500
				}
				let api = this.$appApi.getApi('getOrder', params);
				console.log(api)
				this.$tools.request(
					api,
					res => {
						console.log(res)
					})
			},
			open(e) {
				// console.log('open', e)
			},
			close(e) {
				// console.log('close', e)
			},
			change(e) {
				// console.log('change', e)
			},
			turnkkk() {
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.indexhed {
		background-image: url(../../static/indexHead.png);
		background-size: cover;
		background-repeat: no-repeat;
		height: 300rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		.marginrightpre {
			margin-right: 6%;
		}

		.fontwhite {
			color: #fff;
		}

		.Imgbox {
			// padding: 0 30rpx;
			height: 300rpx;
			margin-top: 40rpx;
			border-radius: 10px;
			width: calc(100vw - 60rpx);
			// display: flex;
			// justify-content: center;
		}

		.showbox {
			width: 48%;
			height: 260rpx;
			background-color: #fff;
			margin-top: 30rpx;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 90rpx;
				height: 90rpx;
			}
		}

		.showboxchild {
			width: 30%;
			height: 210rpx;
			background-color: #fff;
			margin-top: 30rpx;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.greencolor {
				color: #0EBA77;
			}
		}
	}

	.font-shadow {
		text-shadow: 5rpx 5rpx 5rpx gainsboro;
	}
</style>
